<template>
    <div id="app">
        <div class="option">
            <span @click="show()" :style="{color:flag==true?'blue':'' }">正在抢购</span>
            <span>上新预告</span>
        </div>
        <div class="list" v-for="(item,index) in arr" :key="index" v-show="flag==true">
            <img :src="item.pic">
            <span class="local">{{item.local}}</span>
            <h4>{{item.name}}</h4>
            <p class="s1">爆爆团价</p><button>马上抢</button>
            <p>
                <span class="money">￥{{item.money}}</span>
                <span class="discount">{{item.discount}}折</span>
            </p>
            <span class="sell">已售{{item.sell}}份</span>
            <p class="price">￥{{item.price}}</p>
        </div>

    </div>
  
</template>

<script>
import pic1 from '/src/assets/1.png';
import pic2 from '/src/assets/2.png';
import pic3 from '/src/assets/3.png';
export default {    
    data(){
        return {
            flag:false,
            arr:[{
                pic:pic1,local:'汉堡王│北关新天地餐厅',name:'买1送1明星皇堡│用心火烤肉质紧实 鲜嫩多汁 爆爆团',money:'25',discount:'5',sell:'9029',price:'50',
            },{
                pic:pic2,local:'华莱士·全鸡汉@│长治路店',name:'华莱士│聚划算单人套餐│进店必选',money:'12',discount:'4',sell:'179',price:'31.2',
            },{
                pic:pic3,local:'贡天下山西特产│高新店',name:'白老大小米果仁酥220g【爆爆团】',money:'11',discount:'5',sell:'111',price:'1029',
            }],
            show(){
                this.flag=true;
                
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .option{
        height: 30px;
        background: red;
    }
    .option span{
        color: white;
        margin-right: 20px;
    }
    #app{
        width: 94%;
        margin: auto;
    }
    .list {
              height: 160px;
                border: 1px black solid;
                margin: 10px 0;
                border-radius: 10px;
          }
           .list  img{
              height: 140px;
              width: 140px;
              float: left;
              margin:5px;
          }
          .list .local{
            font-size: 14px;
            color: #959595;
          }
          .list h4{
            margin: 5px 0;
          }
           .list  .score{
              font-size: 12px;
              color: red;
              display: inline-block;
              margin-top: 10px;
          }

          .list .s1{
            color: red;
            font-size: 14px;
          }
          .list p{
            margin: 5px 0;
          }
        .list p .money {
            color:red;
            font-size: 20px;
            margin: 0 5px;
        }
        .list p .discount{
            display: inline-block;
            border: 1px red solid;
            border-radius: 5px;
            width: 30px;
            text-align: center;
            color: #f00;
            font-size: 14px;
        }
        .list .price{
            text-decoration-line: line-through;
            color: gainsboro;
            font-size: 14px;
        }
        button{
            float: right;
            margin-right: 10px;
            border: none;
            background: red;
            color: #fff;
            width: 60px;
            height: 30px;
            border-radius: 30px;
        }
        .list  .sell{
            float: right;
            margin-right: 10px;
            font-size: 12px;
            color: #f00;
        }
</style>